<script setup>
import { ref, onMounted,computed,watch } from 'vue'
import * as echarts from 'echarts'

const data = ref([
  {
    "id": 1,
    "term": "2024-2025-2",
    "courseName": "数据结构与算法",
    "teacher": "李明",
    "location": "教学楼A301",
    "weeks": [1, 2, 3, 4, 5, 6, 7, 8, 9],
    "day": "周一",
    "slot": 1
  },
  {
    "id": 2,
    "term": "2024-2025-2",
    "courseName": "操作系统",
    "teacher": "王丽",
    "location": "教学楼B201",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周一",
    "slot": 3
  },
  {
    "id": 3,
    "term": "2024-2025-2",
    "courseName": "计算机网络",
    "teacher": "张伟",
    "location": "教学楼C101",
    "weeks": [1, 2, 3, 4, 5, 6, 7, 8, 9],
    "day": "周二",
    "slot": 2
  },
  {
    "id": 4,
    "term": "2024-2025-2",
    "courseName": "数据库原理",
    "teacher": "刘芳",
    "location": "教学楼D202",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周二",
    "slot": 3
  },
  {
    "id": 5,
    "term": "2024-2025-2",
    "courseName": "软件工程",
    "teacher": "陈刚",
    "location": "教学楼E301",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周二",
    "slot": 4
  },
  {
    "id": 6,
    "term": "2024-2025-2",
    "courseName": "人工智能",
    "teacher": "赵敏",
    "location": "教学楼F201",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周三",
    "slot": 5
  },
  {
    "id": 7,
    "term": "2024-2025-2",
    "courseName": "计算机组成原理",
    "teacher": "孙浩",
    "location": "教学楼G101",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周四",
    "slot": 2
  },
  {
    "id": 8,
    "term": "2024-2025-2",
    "courseName": "离散数学",
    "teacher": "周艳",
    "location": "教学楼H202",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周四",
    "slot": 3
  },
  {
    "id": 9,
    "term": "2024-2025-2",
    "courseName": "编译原理",
    "teacher": "吴磊",
    "location": "教学楼I301",
    "weeks": [10, 11, 12, 13,  14, 15, 16, 17, 18],
    "day": "周五",
    "slot": 2
  },
  {
    "id": 10,
    "term": "2024-2025-2",
    "courseName": "信息安全",
    "teacher": "郑晓",
    "location": "教学楼J201",
    "weeks": [2, 4, 6, 8, 10, 12, 14, 16, 18],
    "day": "周五",
    "slot": 4
  },
  {
    "id": 11,
    "term": "2024-2025-1",
    "courseName": "新手保护期",
    "teacher": "陈证明",
    "location": "教学楼A201",
    "weeks": [1,2,3, 4,5, 6,7, 8,9, 10,11, 12,13, 14,15, 16,17, 18],
    "day": "周五",
    "slot": 4
  }
])
const term = ref('2024-2025-2')
const chartInstance = ref(null)

// 创建一个计算属性来统计每天的课程数量
const coursesCountByDay = computed(() => {
  const filteredData = data.value.filter(course => course.term === term.value)
  const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  const count = days.map(day => ({
    day,
    count: filteredData.filter(course => course.day === day).length
  }))
  return count
})

// 初始化 ECharts 图表
const initChart = () => {
  const chartDom = document.querySelector('.echart1')
  chartInstance.value = echarts.init(chartDom)
  setChartOption()
}

// 设置 ECharts 图表配置项
const setChartOption = () => {
  const option = {
    title: {
      text: '课程次数'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: coursesCountByDay.value.map(item => item.day)
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'bar',
      data: coursesCountByDay.value.map(item => item.count)
    }]
  }
  chartInstance.value.setOption(option)
}

// 监听课程数据和学期变化，更新图表
watch([coursesCountByDay, term], () => {
  if (chartInstance.value) {
    setChartOption()
  }
})

onMounted(() => {
  initChart()
})
</script>

<template>
  <div>
    <div class="head">
      <select v-model="term">
      <option value="2024-2025-1">2024-2025-1</option>
      <option value="2024-2025-2">2024-2025-2</option>
    </select>
    </div>
    <div class="body">
      <div ref="chart" class="echart1"></div>
    </div>
  </div>
</template>

<style scoped>

.head{
  width: 100%;
  height: 10vh;
  background-color: rgb(98, 195, 234);
  margin-bottom: 3vh;
  border-radius: 5px;
}
.head select{
  margin:2vh;
  width: 10vw;
  height: 5vh;
}
.echart1 {
  box-sizing: border-box;
  width: calc(100%);
  height: 70vh;
  /* background-color: skyblue; */
  border: 2px solid skyblue;
  border-radius: 5px;
  padding: 5px;
}
</style>